<template>
    <el-dialog
        v-model="routeRootPathAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="routeRootPathForm" :rules="routeRootPathRules" ref="routeRootPathFormRef">
                <el-form-item label="路由文根" label-width="20%" prop="routeRootPath">
                    <el-input v-model="routeRootPathForm.routeRootPath" placeholder="路由文根" clearable />
                </el-form-item>
                <el-form-item label="路由文根名称" label-width="20%" prop="routeRootName">
                    <el-input v-model="routeRootPathForm.routeRootName" placeholder="路由文根名称" clearable />
                </el-form-item>
                <el-form-item label="路由文根中文名称" label-width="20%" prop="routeRootCnName">
                    <el-input v-model="routeRootPathForm.routeRootCnName" placeholder="路由文根中文名称" clearable />
                </el-form-item>
                <el-form-item label="描述" label-width="20%" prop="routePathDescription">
                    <el-input v-model="routeRootPathForm.routePathDescription" placeholder="描述" clearable />
                </el-form-item>
                <el-form-item label="关联组件" label-width="20%" prop="componentId">
                    <el-select v-model="routeRootPathForm.componentId" clearable placeholder="关联组件" style="width: 100%">
                        <el-option :value="item.id" :label="item.componentCnName" v-for="item in componentList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文根首页" label-width="20%" prop="routeMenuHome">
                    <el-select v-model="routeRootPathForm.routeMenuHome" clearable placeholder="文根首页" style="width: 100%">
                        <el-option :value="item.routeTo" :label="item.cnName" v-for="item in menuAllList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文根首页跳转参数" label-width="20%" prop="routePathParam">
                    <el-input v-model="routeRootPathForm.routePathParam" placeholder="文根首页跳转参数" clearable />
                </el-form-item>
                <el-form-item label="是否站点展示" label-width="20%" prop="showSite">
                    <el-radio-group v-model="routeRootPathForm.showSite">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(routeRootPathFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="AddOrUpdateRouteRootPathDialog" lang="ts">
import {ElNotification, FormInstance} from "element-plus";
import {routeRootPathInfoCreate, routeRootPathInfoQuery, routeRootPathInfoUpdate} from "@/request/routeRootPath";
import {componentInfoQueryNoContent} from "@/request/components";
import {menuAllInfoQuery} from "@/request/menu";
import {computed, ref, defineProps} from "vue";
import {useRouteRootStore} from "@/stores/menu/routeRootPath";

const props = defineProps(['title', 'routeRootPathForm']);

let title = computed(() => {return props['title']});
let routeRootPathForm = computed(() => {return props['routeRootPathForm']});

// 表单规则
let routeRootPathRules = ref({
    routeRootPath: [{ required: true, message: '路由文根不能为空', trigger: 'blur' }],
    routeRootName: [{ required: true, message: '路由文根名称不能为空', trigger: 'blur' }]
});
let componentList = ref([]);
let saveLoading = ref(false);
let menuAllList = ref([]);

let routeRootPathAddOrUpdateDialogVisible = computed(() => {return useRouteRootStore().addOrUpdateDialog});
let routeRootPathSearchData = computed(() => {return useRouteRootStore().routeRootPathSearchData});

// 查询菜单信息
let param = {
    pageInfo: {
        pageIndex: 1,
        pageSize: 10000
    },
    componentType: "CUSTOM"
}
componentInfoQueryNoContent(param).then(res => {
    componentList.value = res.data["dataList"];
})
// 查询所有菜单信息
menuAllInfoQuery().then(res => {
    menuAllList.value = res.data
})

function cancelDialog() {
    useRouteRootStore().resetAddOrUpdateDialog(false);
}

let routeRootPathFormRef = ref<FormInstance>();

function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true;
    formEl.validate((valid) => {
        if (valid) {
            if (routeRootPathForm.value.id !== '') {
                // 修改
                routeRootPathInfoUpdate(routeRootPathForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        saveLoading.value = false
                        useRouteRootStore().resetAddOrUpdateDialog(false);
                        routeRootPathInfoQuery(routeRootPathSearchData.value).then(res => {
                            // 查询所有组件
                            let param = {
                                pageInfo: {
                                    pageIndex: 1,
                                    pageSize: 10000
                                }
                            }
                            componentInfoQueryNoContent(param).then(info => {
                                // 根据componentId匹配数据
                                let resData = res.data["dataList"];
                                for (let i = 0; i < resData.length; i++) {
                                    let data = resData[i];
                                    let filterRes = info.data["dataList"].filter(res => res.id === data.componentId);
                                    if (filterRes.length > 0) {
                                        data.componentName = filterRes[0]["componentCnName"];
                                    }
                                }
                                useRouteRootStore().resetRouteRootPathDataList(res.data);
                            })
                        })
                    }
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 调用后端接口插入数据
                routeRootPathInfoCreate(routeRootPathForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        saveLoading.value = false
                        useRouteRootStore().resetAddOrUpdateDialog(false);
                        routeRootPathInfoQuery(routeRootPathSearchData.value).then(res => {
                            // 查询所有组件
                            let param = {
                                pageInfo: {
                                    pageIndex: 1,
                                    pageSize: 10000
                                }
                            }
                            componentInfoQueryNoContent(param).then(info => {
                                // 根据componentId匹配数据
                                let resData = res.data["dataList"];
                                for (let i = 0; i < resData.length; i++) {
                                    let data = resData[i];
                                    let filterRes = info.data["dataList"].filter(res => res.id === data.componentId);
                                    if (filterRes.length > 0) {
                                        data.componentName = filterRes[0]["componentCnName"];
                                    }
                                }
                                useRouteRootStore().resetRouteRootPathDataList(res.data);
                            })
                        })
                    }
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    })
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>